.js-modal {
    width: 460px;
    background-color: #fff;
    position: fixed;
    left: 50%;
    margin-left: -230px;
    top: 100px;
    z-index: 9999;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);

    &.modal-small {
        width: 300px;
        margin-left: -150px;
    }

    &.modal-large {
        width: 600px;
    }

    &.modal-extra-large {
        width: 900px;
        top: 50px;
        margin-left: -450px;
    }
}

.js-modal-header {

    cursor: move;
    cursor: -webkit-grab;
    font-size: 1.2em;
    font-weight: bold;
    padding: 15px 20px;
    border-bottom: 1px solid #aaa;
    position: relative;

    h5 {
        margin: 0;
    }
}

.js-modal-closer {
    position: absolute;
    right: 15px;
    top: 12px;
    cursor: pointer;
    color: #aaa;
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    &:hover {
        color: #555;
        background: #eee;
        border-radius: 50%;
    }
    i {
        font-style: normal;
        font-family: sans-serif;
        font-weight: bold;
    }
}

.js-modal-body {
    padding: 20px;
    background: #eee;

    table {
        border: 1px solid #ccc;
        border-collapse: collapse;
        width: 100%;
        background-color: #fff;
        max-height: 250px;
        td, th {
            text-align: left;
            padding: 3px 5px;
            border: 1px solid #ccc;
            text-align: center;
        }
        th {
            background: #fff;
            font-weight: bold;
            border-bottom: 2px solid #ccc;
        }

        tr:nth-of-type(odd) {
            background-color: #f9f9f9;
        }
    }

    .label {
        width:80px;
        display: inline-block;
    }
    p {
        margin: 0 0 5px 0;
    }
    input,select,textarea {
        min-width: 200px;
        width: calc(100% - 90px);
        padding: 4px 5px;
        outline: none;
        border: 1px solid #aaa;
    }

    input:focus {
        border:1px solid #5cb85c;
    }
}

.js-modal-footer {
    padding:15px 20px;
    text-align: right;
    .js-btn {
        margin-left: 20px;
    }
}

.pdi-modal {
    input {
        padding: 4px 5px;
    }

    input[type="checkbox"] {
        display: inline;
        min-width: 20px;
        position: relative;
        top: 2px;
    }

    input[type="text"] {
        width: 100%;
        border: 1px solid #aaa;
    }

    .js-pid-left,.js-pid-right {
        display: inline-block;
        width: 48%;
        vertical-align: top;
    }

    .js-pid-right {
        margin-left: 10px;
    }

    p {
        margin-bottom: 5px;
    }
}

.cast-modal {
    span.label {
        width:80px;
        display: inline-block;
    }
    select, input {
        width: 60%;
    }
    p {
        margin: 0 0 5px 0;
    }
}

.js-pid-input-list {
    // padding: 4px 5px;
    padding: 0;
    height: 200px;
    overflow-y: auto;
    margin: 0;
    border: 1px solid #aaa;
    background-color: #fff;
    li {
        list-style-type: none;
        cursor: pointer;
        padding: 2px 5px;
    }

    li.disabled {
        // background-color: #ccc;
        color: #ccc;
        cursor: not-allow;
        pointer-events: none;
    }
    li.active {
        background-color: #CEDFF2;
    }
}


.js-modal-table {
    tr {
        cursor: pointer;
    }
    tr.selected {
        background-color: #daffda!important;
    }
}

.js-modal-search {
    margin: -5px 0;
    input {
        width: 290px;
        margin-right: 20px;
    }
    .js-btn-success {
        margin-right: 10px;
    }
}

.js-modal-pagination {
    ul {
        list-style: none;
        padding: 0;
        display: inline-block;
        margin: 2px 0;
    }

    li {
        font-size: 12px;
        display: inline-block;
        padding: 3px 8px;
        cursor: pointer;
        background: #fff;
        border: 1px solid #ccc;
        border-left: none;
    }

    li:first-child {
        border-left: 1px solid #ccc;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    li:last-child {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    li.active {
        background-color: #daffda;
        cursor: not-allowed;
        pointer-events: none;
    }

    li:hover {
        background-color: #f5f5f5;
    }

    li.disabled {
        cursor: not-allowed;
        pointer-events: none;
        color: #ccc;
    }

    .page-info {
        border: none;
        pointer-events: none;
        background: none;
        margin-left: 20px;
    }
}

.js-modal-edit {
    div {
        display: inline-block;
        width: 25%;
        // margin-top: 5px;
        span.label {
            width: auto;
            position: relative;
            top: 4px;
            left: 4px;
            background: #eee;
            border-radius: 5px;
            color: #555;
        }
        input {
            padding:3px 5px;
            padding-right: 0;
        }

        input[type="datetime-local"] {
            padding: 2px 0 2px 5px;
        }
    }
    .item-large {
        width: 100%;
        textarea {
            width: 98%;
            height: 40px;
            resize: none;
        }
    }
}

.small-modal {
    top: 20px;
    .js-modal-header {
        padding: 10px 20px;
    }

    .js-modal-closer {
        top: 8px;
        right: 10px;
    }
    .js-modal-body {
        padding-bottom: 5px;
    }
    .js-modal-body table td, .js-modal-body table th {
        padding: 2px 5px;
    }

    .js-modal-footer {
        padding: 5px 20px;
    }
}

.data-updated-modal {
    left: unset;
    top: unset;
    right: 10px;
    bottom: 10px;
}

.data-updated-container {
    max-height: 200px;
    overflow-y: auto;
}

/* 静态算法调度弹窗样式 */
.static-schedule {
   p span {
      margin-right: 10px;
   }
   p input {
      width: 210px;
      margin-right: 20px;
   }
   p select {
      width: 100px;
      padding: 6px 10px;
   }


}

.js-static-schedule-select {
   margin-top: 10px;
   .js-select {
      height: 150px;
      width: 45%;
      display: inline-block;
   }
}


.js-static-schedule-operations {

   display: inline-block;
   width: 8%;
   padding: 0;
   margin: 0;
   list-style: none;
   position: relative;
   top: -35px;
   left: 7px;;

   li {
      background: #ddd;
      width: 30px;
      text-align: center;
      border: 1px solid #aaa;
      margin: 5px 0;
      cursor: pointer;
      &:active {
         background-color: #E5E4E6;
         border: 1px solid #4D5952;
         box-shadow: 0 0 3px #999 inset;
      }
   }
}

/* 静态算法调度弹窗样式  end */
